<template>
  <div class="gongzuomian">
    <img src="~@/assets/images/安全等级.png" alt="" />
    <div class="gongzuomian-container">
      <div
        class="gongzuomian-top"
        :style="{
          color: title.includes('优')
            ? '#45cc83'
            : title.includes('良')
            ? '#1761AB'
            : title.includes('中')
            ? '#f7b731'
            : '#f75a5a',
        }"
      >
        {{ title }}
      </div>
      <div class="gongzuomian-bottom">安全等级</div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      title: "", //优，良好，中等，较差
    };
  },
  computed:{
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode"]),
  },
  watch: {
    areaCode: {
      handler(newVal, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    getList() {
      axios
        .get("/dataview/hydrology/getAreaSafetyGrade", {
          params: {
            areaCode: this.areaCode, //换三维对应的区域编码
            // areaName:''
          },
        })
        .then((res) => {
          if (res.data) {
            this.title = res.data.grade;
          }
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.gongzuomian {
  width: 100%;
  height: 320px;
  // background-image: url("~@/assets/images/安全等级.png");
  background-size: cover;
  background-position: center;
  position: relative;
  left: 40px;
  img{
    width: 100%;
    height: 320px;
  }
  .gongzuomian-container {
    position: absolute;
    // left: 340px;
    left: 41%;//1920 100%
    // left: 39.5%;//1536 125%
    // left: 37.5%;//1280 150%
    top: 40%;
    text-align: center;
    .gongzuomian-top {
      font-size: 54px;
      font-weight: bold;
      // color: #45cc83;
      -webkit-text-stroke: 1px white;
    }
    .gongzuomian-bottom {
      color: #04dbf1;
      font-weight: blod;
      font-size: 24px;
      margin-top: 20px;
    }
  }
}
// @media screen and(min-width:1920px){
//   .gongzuomian{
//     left:  50px;
//   }
// }
// @media screen  and (max-width:1920px)and(min-width:1536px){
//   .gongzuomian{
//     left:  41.5%;
//   }
//    }
//    @media screen and (max-width:1536px)and(min-width:1280px) {
//   .gongzuomian{
//     left:  39.5%;
//   }
//       @media screen and (max-width:1280px)and(min-width:1100px){
//       .gongzuomian{
//     left:  37.5%;
//   }
//       }
// }
</style>